<template>
	<ul class="box">
		<li 
			v-for="(value,key,index) in cities" 
			:key="index" 
			@click="handleLetterClick"
			@touchstart="handleTachStart"
			@touchmove="handleTouchMove"
			@touchend="handleTouchEnd"
			:ref="key"
		>
				{{key}}
		</li>
	</ul>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default{
		data(){
			return{
				touchState:false,
				startY:0,
				timer:null
			}
		},
		mounted() {
		},
		updated() {
			//读取第一个字母在content中的y坐标
			this.startY=this.$refs['A'][0].offsetTop
		},
		computed:{
			...mapGetters(['cities'])
		},
		methods:{
			handleLetterClick(e){
				//获取点击的元素是哪个字母。利用vuex传递给list组件使用
				this.$store.commit('getClickAlpahabet',e.target.innerText)
			},
			handleTachStart(){
				this.touchState=true
			},
			handleTouchMove(e){
				if(this.touchState){
					//如果已经触发事件，就关掉
					if(this.timer){
						clearTimeout(this.timer)
					}
					//每隔16s执行一次
					this.timer=setTimeout(()=>{
						//读取触摸目标在视口中的y坐标
						const touchY=e.touches['0'].clientY
						//计算移动的字母个数，其中67是右部的高度,20是每个字母的高度
						const moveNum=Math.floor(((touchY-this.startY)-67)/20)
						if(moveNum >= 0 && moveNum <= 21){
							//接下来就需要把这个移动的字母个数通过vuex传递给list组件使用
							this.$store.commit('moveAlphaNum',moveNum)
						}
					},16)
				}
			},
			handleTouchEnd(){
				this.touchState=false
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '../../assets/styles/varibles.styl'
	.box
		// background-color red
		position absolute
		right 0
		top 1.33rem
		bottom 0
		display flex
		flex-direction column
		justify-content center
		width 0.4rem
		text-align center
		li
			line-height .4rem
			color $bgColor
</style>
